<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>pic_upload</title>
		<meta name="description" content="" />
		<meta name="author" content="HaoChen" />
		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

		 <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
		 <link rel="stylesheet" type="text/css" href="css/droparea-default.css" />

		 <script type="text/javascript" src="scripts/jquery.min.js"></script>
		 <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js">
		 	
		 </script>
		 <style type="text/css">
		 </style>
	</head>

	<body>
		<div id="pic_upload">
			<!------------------Start Upload Div-------------------------------->
			<h1>Pic Upload</h1>
			 <div id="devcontainer">
				<script src="scripts/droparea.js" type="text/javascript"></script>
				<div id="areas">
					<div class="droparea spot" data-width="140" data-height="105" data-type="jpg" data-crop="true" data-quality="60"></div>
					<!--
					<div class="droparea thumb" data-width="140" data-height="105" data-type="jpg" data-crop="true" data-quality="60"></div>
					<div class="droparea thumb" data-width="140" data-height="105" data-type="jpg" data-crop="true" data-quality="40"></div>
					<div class="droparea thumb" data-width="140" data-height="105" data-type="gif" data-crop="true"></div>
					<div class="droparea thumb" data-width="140" data-name="image" data-value="face.png">
						<img src="face.png" alt="face" />
					</div>
					<div class="droparea thumb" data-width="140" data-type="jpg" data-folder="sample"></div>
					<div class="droparea thumb" data-width="140" data-type="jpg" data-something="stupid"></div>
					-->
				</div>

				<script>
					// Calling jQuery "droparea" plugin
					$('.droparea').droparea({
						'post' : 'upload.php',
						'init' : function(r){
							console.log('pic upload init',r);
						},
						'start' : function(r){
							console.log('pic upload start',r);
						},
						'error' : function(r){
							console.log('pic upload error',r);
						},
						'complete' : function(r){
							console.log('pic upload complete',r);
						}
					});
				</script>
				<!-------------------------End Upload-------------------------------------->
			</div>
			
		
		<div id="pics_div">
			<img src="" alt="MyPic" id="thePic"></img>
			<div id="preview_div">
			
			</div>
			<!------Start Description-------------------------------------------------->
			<form action="" method="post" onSubmit="function(){return false;)">
			   <input id="x1" type="hidden" name="x1" value="">
			   <input id="y1" type="hidden" name="y1" value="">
			   <input id="x2" type="hidden" name="x2" value="">
			   <input id="y2" type="hidden" name="y2" value="">
			   <input id='img_url' type="hidden" name="img_url" value="">
			   <label for="title" >Title</label><input type="text" id="title" name="title"/><br />
			   <label for="title" >Description</label><br />
			   <textarea  name="desc" rows="10" cols= "50" style="overflow:hidden"></textarea ><br />
			   <input type="submit" name="submit" value="Submit">
			</form>
			<!------End Description-------------------------------------------------->
		</div>
		
		<div id="pic_select">
		<script type="text/javascript">
		<!--
			function preview(img, selection) {
				var scaleX = 100 / (selection.width || 1);
				var scaleY = 100 / (selection.height || 1);
				
				//Useful data--------------------------------------------------------------------------------
					console.log("scaleX:"+scaleX);
					console.log("scaleY:"+scaleY);
					console.log('[x1,y1,x2,y2]:'+selection.x1+","+selection.y1+","+selection.x2+","+selection.y2);
					$('input[name=x1]').val(selection.x1);
					$('input[name=y1]').val(selection.y1);
					$('input[name=x2]').val(selection.x2);
					$('input[name=y2]').val(selection.y2);

				//--------------------------------------------------------------------------------------------

					$('#preview_div div > img').css({
						width: Math.round(scaleX * 400) + 'px',
						height: Math.round(scaleY * 300) + 'px',
						marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
						marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
					});
				}

			$(document).ready(function () {
				//Get Img url
				var img_url='ladybug_ant.jpg';

				$('input[name=img_url]').val(img_url);
				$('#thePic').attr('src',img_url);
				var pre_img=$('<div><img src='+img_url+ ' style="position: relative;" /><input type="text" name="img_url" /><div>').css({
					position: 'relative',
					overflow: 'hidden',
					width: '100px',
					height: '100px',
				});
				
				$("#preview_div").append(pre_img);
				$('#thePic').imgAreaSelect({
					handles: true,
					aspectRatio: '1:1',
					onSelectEnd: preview,
					x1: 0, y1:0, x2: 100, y2: 100
				});
			});
		//-->
		</script>
	</div>
	</body>
	
</html>
